<template>
  <div class="table-main">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" width="50" align="center" />
      <el-table-column prop="sender" label="通过的好友" align="center" />
      <el-table-column prop="sendTime" label="通过时间" align="center" />
      <template #empty>
        <div class="table-empty">
          <slot name="empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>暂无数据</div>
          </slot>
        </div>
      </template>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      v-model:current-page="query.page"
      v-model:page-size="query.size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getAccountPassApi } from "@/api/modules/business";
import { ResPass } from "@/api/interface";
import { ElMessage } from "element-plus";

const props = defineProps({ accountId: { type: String, default: "" } });
const tableData = ref<ResPass[]>([]);
const total = ref(0);
const query = ref({ page: 1, size: 10 });

async function getData() {
  const data = await getAccountPassApi(props.accountId, query.value.page, query.value.size);
  if (!data.result) return ElMessage.error(data.message);
  tableData.value = data.dataList || [];
  total.value = data.total || 0;
}

function handleSizeChange(num: number) {
  query.value.page = 1;
  query.value.size = num;
  getData();
}

function handleCurrentChange(num: number) {
  query.value.page = num;
  getData();
}

getData();
</script>

<style scoped lang="scss"></style>
